<template>
  <div class="iot_DownBox">
    <img :src="information.skus[sum].picture || ImgFalse" alt="">
    <div>
    <p>{{'已选：'+Options}}</p>
    <div class="iot_Downprice">
    <p>{{ '数量：'+number}}</p>
    <p>{{ '总价：￥'+ information.skus[sum].price*number }}</p>
    </div>
  </div>
  <a href="" class="iot_add" @click.prevent="AddCart">加入购物车</a>
  <a href="" class="iot_buy" @click.prevent="BuyGoods">立即购买</a>
  </div>
</template>

<script>
import { inject } from 'vue';
import { h } from 'vue'
import { ElMessage } from 'element-plus'

export default {
      name:'DetailsDown',
      props:['sum','number','information','Options','ImgFalse'],
      setup(props){
            //每次操作后保存
            const RegisterImformation = inject('RegisterImformation')
            const LoginIndex = inject('LoginIndex')
            function InGoods(){
              RegisterImformation[LoginIndex.value].cart = Goods[14]
              localStorage.setItem('Register',JSON.stringify(RegisterImformation))
            }
        const Goods = inject('Goods')
        function AddCart(){
          let Details = {
            id: props.information.id,
            img:props.information.skus[props.sum].picture || props.ImgFalse,
            options:props.Options,
            number:props.number,
            price:props.information.skus[props.sum].price*props.number
          }
          if(props.information.skus[props.sum].inventory == 0){
            ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '没有库存了，看看其他商品吧'),
            ]),
          })
          }else if(props.Options == []){
            ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '您还没选样式'),
            ]),
          })
          }else if(props.number == 0){
            ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '数量不能为0'),
            ]),
          })
          }else{
            if( Goods[15].length == 0){
              ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '登录后才可以加入购物车'),
            ]),
            })
            }else{
              ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '已加入购物车'),
            ]),
            })
            Goods[14].push(Details)
            InGoods()
            console.log(Goods[14])
            }
          }
        }
        function BuyGoods(){
          ElMessage({
            message: h('p', { style: 'line-height: 1; font-size: 14px; color:#27ba9b' }, [
              h('i', null, '购买功能暂没开通'),
            ]),
            })
        }          
        return{AddCart,BuyGoods}
      }
}
</script>

<style scoped>
.iot_DownBox{
  height: 70px;
  padding: 10px 0;
  display: flex;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.iot_DownBox img{
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.iot_DownBox p{
  margin: 0;
  text-align: left;
}
.iot_Downprice{
  display: flex;
}
.iot_Downprice p:nth-child(2){
  margin-left:40px ;
}
.iot_add,.iot_buy{
  width: 120px;
  height: 40px;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.iot_add{
  position: absolute;
  right: 150px;
  background-color: #ffa868;
}
.iot_buy{
  position: absolute;
  right: 10px;
  background-color:#27ba9b;
}
.iot_buy:hover{
  background-color: #23a387;
}
.iot_add:hover{
  background-color: #dc915b;
}
</style>